<template>
  <div id="index">
    <!-- 轮播图 -->
    <cube-slide ref="slide"
                :data="data"
                @change="changePage">
      <cube-slide-item v-for="(item,index) in data"
                       :key="item.image"
                       @click.native="clickHandler(item, index)">
        <a :href="item.url">
          <img :src="item.image"
               class="banner">
        </a>
      </cube-slide-item>
    </cube-slide>
    <!-- 滚动分类 -->
    <cube-slide ref="slidelists"
                :auto-play="false"
                :data="lists">
      <cube-slide-item v-for="(list, index) in lists"
                       :key="index">
        <ul class="listul">
          <li class="listli"
              v-for="(item,index1) in list"
              :key="index1">
            <a :href="item.url">
              <img :src="item.image"
                   alt="">
              <p>{{item.label}}</p>
            </a>
          </li>
        </ul>
      </cube-slide-item>
    </cube-slide>
    <div class="btn-login"
         @click="login">
      <span>登录</span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: [],
      lists: []// 分类数据
    }
  },
  created () {
    this.getBanner()
  },
  methods: {
    async getBanner () {
      try {
        const result = await this.$http.get('/api/banner')
        this.data = result.data
        const res = await this.$http.get('/api/rollinglist')
        this.lists = res.data
      } catch (error) {
        console.log(error)
      }
    },
    changePage (current) {
      console.log('当前轮播图序号为:' + current)
    },
    clickHandler (item, index) {
      console.log(item, index)
    },
    login () {
      this.$router.push({ path: '/login' })
    }
  }
}
</script>
<style lang="scss" scoped>
#index {
  overflow: hidden;
  .banner {
    display: block;
    width: 100%;
  }
  ul {
    li {
      float: left;
      margin-left: 20px;
      margin-top: 15px;
      a {
        img {
          height: 50px;
          width: 50px;
          border-radius: 50%;
        }
        p {
          font-size: 15px;
        }
      }
    }
  }
  .btn-login {
    position: absolute;
    right: 20px;
    top: 0;
    height: 30px;
    width: 60px;
    border-radius: 20px;
    background-color: #000;
    opacity: 0.4;
    text-align: center;
    color: #fff;
    span {
      font-size: 20px;
    }
  }
}
</style>
